import React from "react";
import {Button, Form, Input, Radio} from "antd";
import request, {get, post_body} from "@/axios/tools";

const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const {TextArea} = Input;

class AddOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tableIDS: []
        }
    }

    /* requestWaiter = () => {
     const {auth: auth = {data: {}}} = this.props;
     return get('/restaurant/listWaiter', {restaurantID: auth.data.restaurant, page: 1, pageSize: 300})
     .then((res) => {
     console.log(res)
     })
     }

     requestTable = () => {
     const {auth: {data: {restaurant}}} = this.props;
     return get('/restaurant/listTableOrRoom', {restaurantID: restaurant, type: ''})
     .then((res) => {
     this.setState({
     tableIDS: res
     })
     })
     }*/

    getRadio = optionsData => {
        return optionsData && optionsData.map((tableData, index) => {
                return (
                    <div key={index} className="table-types-group">
                        <span className="table-types-title">{tableData.label + ':'}</span>
                        <div className="table-types-box">
                            {
                                tableData.children ? tableData.children.map((table) => {
                                    return (
                                        <span key={table.value} className="table-radio">
                                        <RadioButton value={table.value}>{table.label}</RadioButton>
                                    </span>
                                    )
                                }) : []
                            }
                        </div>
                    </div>
                )
            })
    }

    handleSubmit = () => {
        const {form, afterSubmit, requstByAdd, auth: {data: {restaurant: restaurantID}}} = this.props;
        form.validateFields((errors, values) => {
            if (!errors) {
                const {tableID, extra, waiterID} = form.getFieldsValue(['tableID', 'waiterID', 'extra']);
                request({
                    url: '/order/item', method: 'post', body: {
                        restaurantID,
                        tableOrRoom: tableID,
                        waiterID,
                        extra,
                        items: []
                    }
                }).then((res) => {
                    form.resetFields();
                    afterSubmit();
                    requstByAdd();
                }, (err) => {
                    console.log(err)
                })
            }
        })
    }

    componentDidMount() {
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="content-container">
                <Form>
                    <FormItem
                        labelCol={{span: 4}}
                        wrapperCol={{span: 22, offset: 2}}
                    >
                        {getFieldDecorator('tableID', {
                            rules: [{required: true, message: '请选择桌号'}],
                            initialChecked: []
                        })(
                            <RadioGroup className="table-wrapper" onChange={() => {
                                {/*console.log(this.props.form.getFieldValue('tableOrRoom'))*/
                                }
                            }}>
                                {this.getRadio(this.props.optionsData)}
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        className="waiter-form-item"
                        labelCol={{span: 4}}
                        wrapperCol={{span: 22, offset: 2}}
                    >
                        {getFieldDecorator('waiterID', {
                            initialChecked: []
                        })(
                            <RadioGroup className="waiter-wrapper" onChange={() => {
                                {/*console.log(this.props.form.getFieldValue('tableOrRoom'))*/
                                }
                            }}>
                                {this.getRadio(this.props.waiterData)}
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        label={'备注'}
                        labelCol={{span: 4}}
                        wrapperCol={{span: 18}}
                    >
                        {getFieldDecorator('extra')(
                            <TextArea rows={4} placeholder="备注"></TextArea>
                        )
                        }
                    </FormItem>
                    <FormItem
                        wrapperCol={{span: 12, offset: 4}}
                    >
                        <Button type="primary" onClick={this.handleSubmit}>提交</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

export default Form.create()(AddOrder);